<template>
  <Category :title="areaData">
    <div class="total">
        <div class="title">
            <span>近期疫情分布</span>
            <span class="time">截至北京时间 {{covDesc.modifyTime}}</span>
        </div>
        <div class="summary">
            <span>
                高风险区
                <span class="num">{{riskArea.high.length}}</span>
                个 中风险地区
                <span class="num2">{{riskArea.mid.length}}</span>
                个
            </span>
            <span class="rightTag" @click="goAllAreaRisk">
                查看全部<img class="icon" src="../assets/images/moreb.png" alt="">
            </span>
        </div>
        <!-- 高风险地区 -->
        <AreaShow setColor="#f74c31" :areaList="riskArea.high" label="高风险地区"/>

        <!-- 中风险地区 -->
        <AreaShow setColor="#fbb046" :areaList="riskArea.mid" label="中风险地区"/>
    </div> 
  </Category>
</template>

<script>
    import routerJump from '../hooks/routerJump'
    import Category from './common/Category.vue'
    import AreaShow from './common/AreaShow.vue'

    export default {
        name: 'AreaRisk',
        components: {
            Category,
            AreaShow
        },
        props: {
            covDesc: {
                type: Object
            }
        },
        setup(props) {
            const areaData = '地区风险'
            let riskArea = props.covDesc.riskarea
            const {goAllAreaRisk} = routerJump()

            return {
                areaData,
                riskArea,
                goAllAreaRisk
            }
        }
    }
</script>

<style lang="less" scoped>
    .total {
        .title {
            border-left: 0.1rem solid rgba(20, 49, 128);
            padding-left: 0.1rem;
            margin-bottom: 0.2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .time {
                font-size: 0.1rem;
                color: #666;
            }
        }

        .summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.2rem;
            padding: 0.1rem;
            border: .01rem solid #d9d9d9;
            border-radius: .08rem;
            height: 0.5rem;
            .icon {
                width: 0.2rem;
            }
            .num {
                color: #f74c31;
            }
            .num2 {
                color: #fbb046;
            }
            .rightTag {
                font-family: "微软雅黑",Arial, Helvetica, sans-serif;
                color: #3366ff;
                display: flex;
                align-items: center;
            }
        }
    }
</style>